<!--  -->
<template>
  <div @click="routing(Routing)" :class="{'active':isActive,'item':!isActive}">
    <slot name="Tab_ActiveImg" v-if="isActive"></slot>
    <slot name="Tab_img" v-else></slot>
    <slot name="Tab_text"></slot>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      
    }
  },
  computed:{
    isActive(){
      return this.$route.path.indexOf(this.Routing) != -1
    }
  },
  props:{
    Routing:String
  },
  //生命周期 - 创建完成（访问当前this实例）
  methods:{
    routing(item){
      if(!(this.$route.path.indexOf(item) == -1)) return
      this.$router.push(item)
      console.log(this.$route)
      console.log(this.Routing)
      console.log(this.isActive)
      this.$store.commit('updateCurRouting',this.Routing)
      console.log(this.$store.state.currentRouting)
    }
  },
  created() {
  
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  
  }
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
  .active{
    box-shadow: 0px -3px #1177b0 inset;
    background-color: #fdfdfd;
  }
  .active p{
        color: #1177b0;
  }
</style>